@(id: String,onlyPanel:Boolean)(implicit request: RequestHeader)
@main("样品详情")("resultView") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/plugins.min.css")">

	<script src="@routes.Assets.at("easy-pie-chart-2.1.6/dist/jquery.easypiechart.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/App.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/plugins.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/my-quick-nav.js")" type="text/javascript"></script>
	@* <script src="@routes.Assets.at("javascripts/quick-siderbar.js")" type="text/javascript"></script>*@
	<style>
			.genome-pre {
				white-space: pre-wrap;
				word-wrap: break-word;
				border: 0px solid #ccc;
				background-color: white;
			}

			.mySelected {
				background-color: #c0edf1
			}

			.myTab {
				cursor: pointer;
			}

			.strTable > thead > tr > th, .strTable > tbody > tr > th, .strTable > tfoot > tr > th,
			.strTable > thead > tr > td, .strTable > tbody > tr > td, .strTable > tfoot > tr > td {
				vertical-align: middle;
				text-align: center;
			}

			.myA {
				color: #ffffff;
			}

			.myTr:hover .myA {
				color: #c0edf1;
			}

			.myA:hover {
				color: #c0edf1;
			}

			.myTd:hover {
				color: black;
			}

			.nav-is-visible {
				background-color: #364150;
				border-radius: 6px ;
			}

			#myNav ul li:hover {
				background-color: #36C6D3;
			}

	</style>


	<div class="page-content">

		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<i class="fa fa fa-group"></i>
					<a href="@routes.SampleController.sampleManageBefore()">样品管理</a>
					<i class="fa fa-angle-right"></i>
				</li>
				<li>
					<span>样品详情</span>
				</li>
			</ul>
		</div>

		<div class="row">

			<div class="row-fluid col-sm-12" id="sampleInfo" >
				<div class="row">
					<div class="col-md-12 col-sm-12">
						<div class="portlet blue-dark box">
							<div class="portlet-title">
								<div class="caption" style="cursor: pointer;
									width: 98%" onclick="Tool.expand(this)">
									样品信息
								</div>
								<div class="tools">
									<a class="collapse" id="removeClick" disabled="true"></a>
								</div>
							</div>

							<div class="portlet-body" style="">
								<div class="table-responsive">

									<form class="form-horizontal" role="form" id="sample">
										<div class="form-body">

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">样品编号:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="id">  </p>
														</div>
														<label class="control-label col-md-2">panel:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="panel">  </p>
														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">index号:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="indexId">  </p>
														</div>
														<label class="control-label col-md-2">项目:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="sampleIntro">  </p>
														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">性别:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="gender">  </p>
														</div>
														<label class="control-label col-md-2">推断性别:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="inferGender">  </p>
														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">类型:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="kind">  </p>
														</div>
														<label class="control-label col-md-2">备注:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="comment">  </p>
														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">分析名称:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="updateMission">  </p>
														</div>
														<label class="control-label col-md-2">更新时间:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="updateTime">  </p>
														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">导出报告:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="export">  </p>
														</div>
													</div>
												</div>
											</div>

											<h4>基本信息</h4>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">Interlocus Balance:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="Interlocus Balance">  </p>
														</div>
														<label class="control-label col-md-2">Single Source:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="Single Source">  </p>
														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">iSNP Loci Typed:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="iSNP Loci Typed">  </p>
														</div>
														<label class="control-label col-md-2">
															Autosomal Loci Typed:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="Autosomal Loci Typed">  </p>
														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">X Loci Typed:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="X Loci Typed">  </p>
														</div>
														<label class="control-label col-md-2">Y Loci Typed:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="Y Loci Typed">  </p>
														</div>
													</div>
												</div>
											</div>

										</div>
									</form>

								</div>
							</div>
						</div>
					</div>
				</div>

				<div id="sampleDetail">

					<div id="result" style="display: block" >

						<div class="row" id="myBasicInfo">
							<div class="col-md-12 col-sm-12" >

								<h4>Autosomal STRs</h4>

								<div class="tab-pane fade in active" id="autoStr">

									<div class="portlet blue-dark box" id="autoMyDepthInfo">
										<div class="portlet-title">
											<div class="caption" style="cursor: pointer;
												width: 98%" style="cursor: pointer;
												width: 98%" onclick="Tool.expand(this)">
												Autosomal STRs位点深度信息(<span id="id" class="id"></span>)
											</div>
											<div class="tools">
												<a class="collapse" id="removeClick" disabled="true"></a>
											</div>
										</div>
										<div class="portlet-body" id="noCotent" style="display: block">
											<div class="tab-pane active " id="tab_1">

												<div class="table-responsive" id="tableContent">
													<table class="display table table-bordered detailTable" id="dataTable"

													>
														<thead>
														</thead>
													</table>

												</div>

											</div>
										</div>
										<div>
										</div>
									</div>

								</div>

								<h4>Y STRs</h4>

								<div class="tab-pane" id="yStr">

									<div class="portlet blue-dark box" id="yMyDepthInfo">
										<div class="portlet-title">
											<div class="caption" style="cursor: pointer;
												width: 98%" onclick="Tool.expand(this)">
												Y STRs位点深度信息(<span id="id" class="id"></span>)
											</div>
											<div class="tools">
												<a class="collapse" id="removeClick" disabled="true"></a>
											</div>

										</div>

										<div class="portlet-body" id="noCotent" style="display: block">

											<div class="tab-pane active " id="tab_1">

												<div class="table-responsive" id="tableContent">
													<table class="display table table-bordered detailTable" id="dataTable"

													>
														<thead>
														</thead>
													</table>

												</div>

											</div>

										</div>

										<div>

										</div>
									</div>

								</div>

							</div>
						</div>
					</div>

					<div id="locusModal" class="modal fade myModal">
						<div class="modal-dialog" style="width: 800px">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" data-dismiss="modal" aria-hidden="true" class="close">
												&times;</button>
									<h4 class="modal-title">
										<span id="number" class="locus"></span>(<span id="number" class="id"></span>
										)</h4>
								</div>
								<div class="modal-body">

									<div class="table-responsive" id="tableContent">
										<table class="display table table-bordered detailTable" id="detailTable"

										>
											<thead>
											</thead>
										</table>

									</div>
									<hr>
									<div align="center">
										<div id="strDetailChart" style=""></div>
									</div>

								</div>
								<div class="modal-footer">
									<button type="button" data-dismiss="modal" class="btn btn-default ">关闭</button>
								</div>
							</div>
						</div>
					</div>

				</div>


			</div>

		</div>

	</div>

	<nav class="quick-nav" style=" " id="myNav">
		<a class="quick-nav-trigger" href="#0" style="cursor: pointer;" onclick="SampleSummary.changeHref">
			<span aria-hidden="true" style="cursor: pointer;
				z-index: 99;"></span>
		</a>
		<ul id="myUl">
			<li>
				<a href="#sampleInfo" >
					<span>样品信息</span>
				</a>
			</li>
			<li>
				<a href="#autoMyDepthInfo" >
					<span>Autosomal STRs位点深度信息</span>
				</a>
			</li>
			<li>
				<a href="#yMyDepthInfo" >
					<span>Y STRs位点深度信息</span>
				</a>
			</li>
		</ul>
		<span aria-hidden="true" class="quick-nav-bg"></span>
	</nav>


	<script>
			var id = "@id"
			var onlyPanel = "@onlyPanel"

			function test() {
				$("#{gender} {kind}Percent").data("easyPieChart").update(percent)
			}

			$(function () {
				SetBSampleSummary.init
				SetBSampleDetail.init

				QuickNav.init()

			})
	</script>


}